<template>
  <div id="content">
    <Condition @select-data="selectData" :channels="channels" />
    <Select :articles="articles" @page-click="pageClick" @delete-article="deleteArticle" />
  </div>
</template>

<script>
import Condition from "./cpnChild/condition";
import Select from "./cpnChild/select";

import { GetArticle, GetChannel, GetDeleteArticle } from "@/services/article";

export default {
  name: "",
  data() {
    return {
      articles: {},
      page: 1,
      status: null,
      channels: [],
      channel_id: null,
      begin_pubdate: "",
      end_pubdate: "",
    };
  },
  components: {
    Select,
    Condition,
  },
  created() {
    this.loadArticle();
    this.loadChannel();
  },
  methods: {
    // 请求数据
    loadArticle(page = 1, status = null, channel_id = null, begin_pubdate, end_pubdate) {
      GetArticle({
        page,
        per_page: 10,
        status, // 状态筛选
        channel_id, // 频道筛选
        begin_pubdate, // 开始日期
        end_pubdate, // 截止日期
      }).then((res) => {
        // console.log(res);
        this.articles = res.data.data;
      });
    },
    loadChannel() {
      GetChannel().then(res => {
        console.log(res);
        this.channels = res.data.data.channels;
      })
    },

    // 自定义事件
    selectData(status, channel_id, rangeDate) {
      this.status = status;
      this.channel_id = channel_id;
      this.begin_pubdate = rangeDate[0];
      this.end_pubdate = rangeDate[1];
      this.loadArticle(this.page, status, channel_id, rangeDate[0], rangeDate[1]);
    },
    pageClick(page) {
      this.page = page;
      this.loadArticle(page, this.status, this.channel_id, this.begin_pubdate, this.end_pubdate);
    },
    deleteArticle(articleId) {
      GetDeleteArticle(articleId).then(res => {
        console.log(res);
      })
    }
  },
};
</script>

<style scoped></style>
